<script lang="ts" setup>
const props = defineProps<{
  list?: any[]
  type?: string
}>()
const emit = defineEmits<{
  (e: 'clickItem', item: any): void
}>()
const route = useRoute()
const mockData = [
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png',
  },
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png',
  },
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png',
  },
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png',
  },
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png',
  },

]
const list = computed(() => {
  if (props.list) {
    return props.list
  }
  else {
    return mockData
  }
})

function handleClickItem(item: any) {
  emit('clickItem', item)
}

function highlightTitle(title: string, charToHighlight: string) {
  if (!charToHighlight)
    return title
  const highlighted = title.replace(new RegExp(charToHighlight, 'g'), `<span style="color: red;">${charToHighlight}</span>`)
  return highlighted
}
</script>

<template>
  <div class="w-full gap-y-30px pr-30px">
    <div
      v-for="item in list" :key="item.id"
      class="my-20px flex cursor-pointer overflow-hidden rounded-10 rounded-6px bg-#F7F9FD"
      hover="text-#AC8358" @click="handleClickItem(item)"
    >
      <slot v-if="item.title || item.time || item.info" name="image">
        <el-image :src="item.url?.length ? getImgUrl(item.url) : '/img/placeholder.jpg'" class="inline-block h-80px w-30% w-full md:h-158px" />
      </slot>
      <div class="w-60% px-24px py-16px">
        <div class="truncate text-size-18px font-700 line-height-26px" v-html="highlightTitle(item.title, route.query.data as string)" />
        <div class="line-clamp-2 mt-5px text-ellipsis text-#424242">
          {{ item.blurd }}
        </div>
        <div class="flex items-center justify-between pt-20px" text="#AEAEB2">
          <span>
            {{ item.info }}
          </span>
          <el-divider direction="vertical" />
          <span>
            {{ item.time }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .itemTitle{
//   &:hover{
//     color:#AC8358
//   }
// }
</style>
